<template>
  <div class="right-top">
    <!-- background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"-->
    <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">厂区</el-menu-item>
      <el-submenu index="2">
        <template slot="title">{{areaName}}</template>
        <el-menu-item
          v-for="(item, index) in areaCodeArr"
          :key="index"
          :index="item.index"
        >{{item.areaCode}}</el-menu-item>
      </el-submenu>
      <el-submenu v-if="buildingCodeArr.length!=0" index="3">
        <template slot="title">{{buildingName}}</template>
        <el-menu-item
          v-for="(item, index) in buildingCodeArr"
          :key="index"
          :index="item.index"
        >{{item.buildingCode}}</el-menu-item>
      </el-submenu>
      <el-menu-item v-else index="3">楼/装置</el-menu-item>
      <el-submenu v-if="floorArr.length!=0" index="4">
        <template slot="title">{{floorName}}</template>
        <div v-for="(item, index) in floorArr" :key="index">
          <el-menu-item :index="item.index">{{item.floorCode}}</el-menu-item>
        </div>
      </el-submenu>
      <el-menu-item v-else index="4">楼层</el-menu-item>
    </el-menu>
    <div>
      <el-select
        @remove-tag="selClear"
        @change="getDataList"
        style="width: 100%;padding-bottom: 5px;"
        size="small"
        v-model="typeVal"
        placeholder="选择设备类型,必选"
        clearable
      >
        <el-option
          v-for="item in markertypes"
          :key="item.code"
          :label="item.value1"
          :value="item.code"
        ></el-option>
      </el-select>
    </div>
    <div>
      <el-checkbox-group v-model="checkedTypes">
        <el-checkbox
          style="display:block;"
          v-for="small in devicetypesmallArr"
          :label="small.value1"
          :key="small.code"
        >{{small.value1}}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      areaName: "区域",
      buildingName: "楼/装置",
      floorName: "楼层",
      treeListData: [],
      //区码
      areaCodeArr: [],
      //楼码
      buildingCodeArr: [],
      //楼层
      floorArr: [],
      markertypes: [], // tab列表
      markerIndex: 1, // 当前tab(当前选中markertype)
      markerList: {}, // 列表
      // 分页
      page: 1, // 当前页码
      limit: 1000, // 每页数
      total: 0, // 总条数
      typeVal: [], // 查询条件-选中的设备类型
      keyword: "", // 查询条件
      list: [],
      //小类型筛选
      checkedTypes: [],
      devicetypesmallArr: []
    };
  },
  watch: {
    mapid: function(val) {
      this.getDataList();
    }
  },
  created() {
    //区域数组
    this.areaArr();
    //设备类型
    this.initDeviceType();
    //设备分类
  },
  computed: {
    ...mapGetters(["areaname", "mapid"])
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      // console.log('一级：' + key.split('-')[0] + '二级：' + key.split('-')[1])
      let childNo = parseInt(key.split("-")[1]);
      switch (key.split("-")[0]) {
        //选择厂区
        case "1":
          this.areaName = "区域";
          this.$emit("changeMapOptions", "1");
          this.buildingCodeArr = [];
          this.buildingName = "楼/装置";
          this.floorArr = [];
          this.floorName = "楼层";
          break;
        //选择区域
        case "2":
          this.areaName = this.areaCodeArr[childNo - 1]["areaCode"];
          this.$emit("changeMapOptions", this.areaCodeArr[childNo - 1]["id"]);
          //存入mapid
          this.$store.dispatch("markers/mapSetting", {
            key: "mapid",
            val: this.areaCodeArr[childNo - 1]["id"]
          });
          this.floorArr = [];
          this.buildingName = "楼/装置";
          let buildingCodeArr = this.areaCodeArr[childNo - 1]["children"];
          for (let i = 0; i < buildingCodeArr.length; i++) {
            buildingCodeArr[i]["index"] = "3-" + (i + 1).toString();
            buildingCodeArr[i]["buildingCode"] = buildingCodeArr[i]["name"];
          }
          this.buildingCodeArr = buildingCodeArr;
          break;
        //选择楼/装置
        case "3":
          this.buildingName = this.buildingCodeArr[childNo - 1]["buildingCode"];
          this.$emit(
            "changeMapOptions",
            this.buildingCodeArr[childNo - 1]["id"]
          );
          //存入mapid
          this.$store.dispatch("markers/mapSetting", {
            key: "mapid",
            val: this.buildingCodeArr[childNo - 1]["id"]
          });
          this.floorName = "楼层";
          // debugger
          let floorArr = this.buildingCodeArr[childNo - 1]["children"];
          for (let i = 0; i < floorArr.length; i++) {
            floorArr[i]["index"] = "4-" + (i + 1).toString();
            floorArr[i]["floorCode"] = floorArr[i]["name"];
          }
          this.floorArr = floorArr;
          break;
        //选择楼层
        case "4":
          this.floorName = this.floorArr[childNo - 1]["floorCode"];
          this.$emit("changeMapOptions", this.floorArr[childNo - 1]["id"]);
          //存入mapid
          this.$store.dispatch("markers/mapSetting", {
            key: "mapid",
            val: this.floorArr[childNo - 1]["id"]
          });
          break;
        default:
          break;
      }
    },
    areaArr() {
      // todo
      this.$http.get("mapboxmaplevel/getall", null, res => {
        //数据处理
        this.treeListData = res.data;
        this.treeToSelect(res.data);
        // console.log(JSON.stringify(res.data))
      });
    },
    initDeviceType() {
      // 读取厂区标记分类
      this.$http.get("dictionary/getForSelect?code=BC004", null, res => {
        this.markertypes = res.data;
      });
    },
    //区域选择
    treeToSelect(data) {
      //区码整合
      let areasData = data[0]["children"];
      for (let i = 0; i < areasData.length; i++) {
        areasData[i]["index"] = "2-" + (i + 1).toString();
        areasData[i]["areaCode"] = areasData[i]["name"];
      }
      // debugger
      this.areaCodeArr = areasData;
    },
    //标记列表
    getDataList() {
      let vm = this;
      console.log("mapid" + this.$store.getters.mapid);
      if (this.$store.getters.mapid === "") {
        this.$message({
          showClose: true,
          message: "请选择厂区",
          type: "warning"
        });
        return;
      }
      // if (!vm.typeVal) {
      //   return;
      // }
      let devicetype = vm.typeVal;
      vm.typeChange(vm.typeVal); //  联动
      // 根据分类读取图标列表
      let condition = "";
      if (vm.keyword !== "") {
        condition = "&devicename=" + vm.keyword;
      }
      this.$http.get(
        "BASF10105/deviceList?pageindex=" +
          vm.page +
          "&pagesize=" +
          vm.limit +
          "&mapid=" +
          vm.mapid +
          "&devicetype=" +
          devicetype +
          condition,
        null,
        res => {
          if (res.data === undefined) {
            return;
          }
          //图标统一处理
          vm.markerList = res.data;
          for (let i of vm.markerList) {
            i.iconclass = vm.convIconClas(i.devicetype);
          }
          this.$store.dispatch("markers/setPoints", res.data);
        }
      );
    },
    selClear() {
      console.log(this.typeVal);
      if (this.typeVal.length === 0) this.markerList = [];
      this.$store.dispatch("markers/setPoints", []);
    },
    //图标类型处理
    convIconClas(devicetype) {
      let ret = "icon-marker";
      switch (devicetype) {
        case "BC004001":
          ret = "iconhuanbao";
          break;
        case "BC004005":
          ret = "icondianziweilan";
          break;
        case "BC004002":
          ret = "iconhuozai";
          break;
        // case 'BC004001':
        //   ret = 'iconmenjin'
        //   break
        case "BC004004":
          ret = "iconshipinjiankong";
          break;
        default:
          break;
      }
      return ret;
    },
    typeChange(devicetype) {
      let vm = this;
      if (!devicetype) {
        vm.devicetypesmallArr = [];
        return;
      }
      let value2 = vm.markertypes.find(c => c.code === devicetype).value2;
      this.$http.get("dictionary/getForSelect?code=" + value2, null, res => {
        vm.devicetypesmallArr = res.data;
      });
    }
  }
};
</script>

<style>
.right-top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.el-menu--horizontal {
  max-height: 500px;
  overflow-y: scroll;
}
</style>